
import React, { useState } from 'react';
import {
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    TeamOutlined,
    UserOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Image, Layout, Menu, theme } from 'antd';
import { NavLink } from 'react-router-dom';
import { homeRouter } from '../../router';  
// 样式 
// import '../../layouts/home/left.css'
function Left() {
    // const { Header, Content, Footer, Sider } = Layout;

    type MenuItem = Required<MenuProps>['items'][number];
    function getItem(
        label: React.ReactNode,
        key: React.Key,
        icon?: React.ReactNode,
        children?: MenuItem[],
    ): MenuItem {
        return {
            key,
            icon,
            children,
            label,
        } as MenuItem;
    }
    const render = ( arr: Router1) => {
        var items: any = []
        arr && arr.map((item, index)=> {
            items.push(
                getItem(<NavLink to={item.path}>{item.title}</NavLink>,index, <img style={{width:"25px",height:"25px"}} src={item.icon} alt="icon" />)
            )
        })
        return items
    }
    return (
       <>
        <Menu style={{ width: '100%', height: '100%' }} defaultSelectedKeys={['0']} mode="inline" items={render(homeRouter)}></Menu>
        
        </>
    )
}

export default Left
